<template>
	<view class="repair" :style="{backgroundImage: 'url('+bgimg+');'}">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar :leftText="title" :autoBack="true" bgColor="transparent" leftIconColor="#fff">
			</u-navbar>
		</view>
		
		<view class="con-body" v-if="showEmpty === false">
			<view style="color:#fff;">
				<view style="font-size: 75rpx;padding:60rpx 20rpx 30rpx;font-weight: bold;">
					<view class="dis_inl_blo" style="margin-bottom:0rpx;">{{title}}</view>
					<view v-if="detail.type==0">服务</view>
				</view>
				<view>
					<view style="font-size: 35rpx;padding-left:30rpx;">龙海突击队</view>
					<view style="font-size: 26rpx;" class="label" v-if="detail.type==0">
						一站式全方位的“36524守护”服务
					</view>
					<view style="font-size: 26rpx;padding:3rpx 30rpx;margin-top:20rpx;"  v-else>
						以臻致的物业服务
						<view>为业主营造幸福、温暖的舒居生活</view>
					</view>
				</view>
				<view style="text-align: center;margin-top:30rpx;">
					<image style="height:60rpx;" mode="heightFix" src="https://resourse.cnlhjt.com/upload/20221014/885dbdb98b2b7c529cbf1cf056b10860.png"></image>
				</view>
			</view>
			<!-- 服务项目 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="title">
						<view class="title_head">服务项目</view>	
					</view>
					<view class="user-list">
						<view class="user-list-cell">
							<uni-table style="border-radius: 15rpx;" border stripe emptyText="暂无更多数据">
								<!-- 表头行 -->
								<uni-tr>
									<uni-th width="100" align="center">服务项目</uni-th>
									<uni-th align="left">价格</uni-th>
									<!-- <uni-th align="left">备注</uni-th> -->
								</uni-tr>
								<!-- 表格数据行 -->
								<uni-tr v-for="(item, index) in detail.project" :key="index">
									<uni-td align="center">{{item.name}}</uni-td>
									<uni-td>{{item.price}}/{{item.unit}}{{item.memo}}</uni-td>
									<!-- <uni-td>{{item.memo}}</uni-td> -->
								</uni-tr>
							</uni-table>
						</view>
					</view>
				</view>
			</view>

			<!-- 服务保障 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="title">
						<view class="title_head">服务保障</view>
					</view>
					<view class="user-list" style="margin: 20rpx; padding-bottom: 20rpx;">
						<u-grid col="3" :border="false">

							<u-grid-item :name="item.name" v-for="(item,index) in guarantee" :key="index">
								<image style="width:120rpx;" mode="widthFix" :src="item.icon"></image>
								<!-- <u-icon size="65" :name="item.icon" :label="item.name" labelPos="bottom" space="10"> -->
								<!-- </u-icon> -->
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>

			<!-- 服务承诺 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90" >
					<view class="title">
						<view class="title_head">服务承诺</view>
					</view>
					<view class="user-list" style="padding:0 20rpx 10rpx;">
						<rich-text class="user-list-cell" :nodes="detail.promise"></rich-text>
						<!-- <u-parse class="user-list-cell" :content="detail.promise"></u-parse> -->
						<!-- <p>
							<p style="font-size: 11pt;font-family:'微软雅黑';text-indent: 2em;">如果说交付是美好生活的开始，那么房修则是最长情的告白与陪伴。作为业主幸福生活的'守护使'者，龙海智慧物业以专业、细致的房修服务，为业主打造更有温度、有品质的社区生活。因此，我们承诺：</p>
							<p style="padding:10px 0;">
								<p style="padding:15px;box-shadow: 0 0 5px #ddd;border-radius: 10px;margin-bottom:10px;">
									<img style="height:70px;width:70px;display: inline-block;vertical-align: middle;" src="https://resourse.cnlhjt.com/upload/20221014/152ac72751ba7a28c8b3593aec77675b.png" alt="">
									<span style="display: inline-block;width:68%;margin-left:16px;vertical-align: middle;">
										<span style="display:block;font-size: 11pt;font-family:'微软雅黑';margin-bottom:5px;">专业培训、高质量、高效率</span>
										<span style="display:block;font-size: 7pt;font-family:'微软雅黑';">每一位房修工程师，都需要接受并通过专业培训，不断提升服务技能，优化操作流程，确保向社区业主提供高质量、高效率的维修服务</span>
									</span>
								</p>
								<p style="padding:15px;box-shadow: 0 0 5px #ddd;border-radius: 10px;margin-bottom:10px;">
									<img style="height:70px;width:70px;display: inline-block;vertical-align: middle;" src="https://resourse.cnlhjt.com/upload/20221014/b8da63ab7df7a3084ed13be1298a1218.png" alt="">
									<span style="display: inline-block;width:68%;margin-left:16px;vertical-align: middle;">
										<span style="display:block;font-size: 11pt;font-family:'微软雅黑';margin-bottom:5px;">文明礼貌、尊重业主</span>
										<span style="display:block;font-size: 7pt;font-family:'微软雅黑';">讲究文明礼貌，注重言行举止，尊重业主，竭诚为业主服务。</span>
									</span>
								</p>
								<p style="padding:15px;box-shadow: 0 0 5px #ddd;border-radius: 10px;margin-bottom:10px;">
									<img style="height:70px;width:70px;display: inline-block;vertical-align: middle;" src="https://resourse.cnlhjt.com/upload/20221014/c55c29b0a82d4295c1930f4fdfac7cc5.png" alt="">
									<span style="display: inline-block;width:68%;margin-left:16px;vertical-align: middle;">
										<span style="display:block;font-size: 11pt;font-family:'微软雅黑';margin-bottom:5px;">认真细致、清洁卫生、节约材料</span>
										<span style="display:block;font-size: 7pt;font-family:'微软雅黑';">工作认真细细致，注意清洁卫生，节约材料，损坏东西负责赔偿。</span>
									</span>
								</p>
								<p style="padding:15px;box-shadow: 0 0 5px #ddd;border-radius: 10px;margin-bottom:10px;">
									<img style="height:70px;width:70px;display: inline-block;vertical-align: middle;" src="https://resourse.cnlhjt.com/upload/20221014/fb26bac4ae18d2a96543230e1dc37ad6.png" alt="">
									<span style="display: inline-block;width:68%;margin-left:16px;vertical-align: middle;">
										<span style="display:block;font-size: 11pt;font-family:'微软雅黑';margin-bottom:5px;">及时维修、确保合格</span>
										<span style="display:block;font-size: 7pt;font-family:'微软雅黑';">尽力做到当天的维修投诉当天处理完，实在无法完成的必须向业主解释清楚，做到维修及时率达到99%以上，维修合格率达到95%以上。</span>
									</span>
								</p>
								<p style="padding:15px;box-shadow: 0 0 5px #ddd;border-radius: 10px;margin-bottom:10px;">
									<img style="height:70px;width:70px;display: inline-block;vertical-align: middle;" src="https://resourse.cnlhjt.com/upload/20221014/7edc11c8c3104ff36afbc922f94ba3e3.png" alt="">
									<span style="display: inline-block;width:68%;margin-left:16px;vertical-align: middle;">
										<span style="display:block;font-size: 11pt;font-family:'微软雅黑';margin-bottom:5px;">培训持证上岗、定时检查设备</span>
										<span style="display:block;font-size: 7pt;font-family:'微软雅黑';">所有员工必须定期参加培训，持证上岗，确保大厦内所有机电设备处于良好的运行状态。</span>
									</span>
								</p>
								<p style="padding:15px;box-shadow: 0 0 5px #ddd;border-radius: 10px;margin-bottom:10px;">
									<img style="height:70px;width:70px;display: inline-block;vertical-align: middle;" src="https://resourse.cnlhjt.com/upload/20221014/71e3ea9d3f40746322ffbedb5314874b.png" alt="">
									<span style="display: inline-block;width:68%;margin-left:16px;vertical-align: middle;">
										<span style="display:block;font-size: 11pt;font-family:'微软雅黑';margin-bottom:5px;">线上支付、公开透明</span>
										<span style="display:block;font-size: 7pt;font-family:'微软雅黑';">所有维修费用均采取线上支付的方式，房修工程师线下不会收取任何费用。</span>
									</span>
								</p>
								<p style="padding:15px;box-shadow: 0 0 5px #ddd;border-radius: 10px;margin-bottom:10px;">
									<img style="height:70px;width:70px;display: inline-block;vertical-align: middle;" src="https://resourse.cnlhjt.com/upload/20221014/71e3ea9d3f40746322ffbedb5314874b.png" alt="">
									<span style="display: inline-block;width:68%;margin-left:16px;vertical-align: middle;">
										<span style="display:block;font-size: 11pt;font-family:'微软雅黑';margin-bottom:5px;">用户评价、满意舒心</span>
										<span style="display:block;font-size: 7pt;font-family:'微软雅黑';">维修是否专业，服务是否满意，通过龙海智慧物业小程序，您可以直接线上对维修人员进行评价，让你越住越舒心!</span>
									</span>
								</p>
							</p>
						</p> -->
					</view>
				</view>
			</view>

			<!-- 服务说明 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="title">
						<view class="title_head">服务说明</view>
					</view>
					<view class="user-list" style="padding:0 20rpx 10rpx;">
						<rich-text class="user-list-cell" :nodes="detail.description"></rich-text>
						<!-- <u-parse class="user-list-cell" :content="detail.description"></u-parse> -->
					</view>
				</view>
			</view>
			<view style="margin-bottom: 30rpx;">
				<u-button :customStyle="btnStyle" @click="intoRepair">立即预约</u-button>
			</view>
			

		</view>
		<view class="con-body" v-if="showEmpty">
			<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getRepairDetail
	} from "@/service/configService.js";
	export default {
		data() {
			return {
				title: '项目名称',
				name: 'project',
				id: 0,
				detail: {},
				guarantee: [{
						icon: 'https://resourse.cnlhjt.com/upload/20220830/4814772703b91f305525b55ba31c50df.png',
						name: '实名认证'
					},
					{
						icon: 'https://resourse.cnlhjt.com/upload/20220830/a1e00396afdf9cc8ebbbb6403ee79ac0.png',
						name: '价格透明'
					},
					{
						icon: 'https://resourse.cnlhjt.com/upload/20220830/d0693569ee722cedad481f2d21126f03.png',
						name: '售后质保'
					}
				],
				btnStyle: {
					width: '94%',
					marginLeft: '3%',
					borderRadius: '40rpx',
					marginTop: '100rpx',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF',
					border:'none'
				},
				showEmpty: true,
				bgimg:'https://resourse.cnlhjt.com/upload/20221014/fcd772ca660e79c1f6ae96ea5def68da.png'
			}
		},
		onLoad(options) {
			this.title = options.title;
			this.name = options.name;
			this.id = options.id;
			this.getDetail(options.id);
		},
		methods: {
			getDetail(rid) {
				getRepairDetail({
					rid: rid
				}).then(res => {
					// console.log(res);
					if (res.code == 200) {
						this.showEmpty = false;
						this.detail = res.result;
						if(res.result.type==1){
							this.bgimg='https://resourse.cnlhjt.com/upload/20221014/7ea0b8798f932d2156207ba447bcd1db.png'
						}else{
							this.bgimg='https://resourse.cnlhjt.com/upload/20221014/fcd772ca660e79c1f6ae96ea5def68da.png'
						}
					} else {
						this.showEmpty = true;
					}
				});

			},
			intoRepair() {
				this.$u.route({
					url: '/pagesHome/repair/repair',
					params: {
						typeValue: this.title,
						type:this.detail.type,
						tid: this.id
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #339ba1 !important;
	}
	.repair {
		padding: 10rpx 30rpx;
		
		background-position: center top;
		background-size: 100% 750rpx;
		background-repeat: no-repeat;
	}
	.title{
		text-align: center;
		padding:15rpx 0;
		.title_head{
			display: inline-block;
			padding:0rpx 60rpx;
			color:#fff;
			height:50rpx;
			line-height: 50rpx;
			background-image: url('https://resourse.cnlhjt.com/upload/20221014/2b536e6e3056a87f5029b3f7222dc9f5.png');
			background-position: center top;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}
	.label{
		display: inline-block;
		padding:3rpx 30rpx;
		padding-right:60rpx;
		border-radius: 20rpx;
		margin-top:20rpx;
		background-image: linear-gradient(to right,#008389,#7fbfc4);
	}
</style>
